.order {
    width: 1200px;
    min-width: 100%;
    height: auto;
    padding-bottom: 50px;
    display: grid;
    place-items: center;
    background-color: #f5f5f5;

    .bread {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        padding-left: 160px;
    }

    .orderContent {
        width: 1200px;
        border-radius: 6px;
        display: grid;
        gap: 20px;
        padding: 20px 0;

        .title {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding-left: 20px;
            font-size: 16px;
            color: #666;
        }

        .address {
            width: 100%;
            background-color: white;

            .content {
                width: 100%;
                height: 200px;
                display: flex;
                padding: 30px;
                // justify-content: center;
                align-items: center;

                .info {
                    width: 70%;
                    height: 100%;
                    display: grid;
                    grid-template-rows: repeat(3, 1fr);
                    // row-gap: 10px;
                    font-size: 14px;
                    color: #999;

                    span:last-child {
                        margin-left: 10px;
                        color: #333;
                        letter-spacing: 2px;
                    }
                }

                button {
                    width: 80px;
                    height: 40px;
                    margin: 0 20px;
                    color: white;
                    border: none;
                    background-color: #27ba9b;
                    border-radius: 4px;
                    cursor: pointer;
                    font-size: 14px;

                    &:hover {
                        background-color: #1ea385;
                    }
                }



                button:nth-child(3) {
                    background-color: #2b92d3;

                    &:hover {
                        background-color: #58adcb;
                    }
                }

                button:nth-child(4) {
                    background-color: #dcad66;

                    &:hover {
                        background-color: #daa04a;
                    }
                }


            }


        }

        .goods {
            width: 1200px;
            background-color: white;
            border-radius: 6px;
            margin: 20px 0;
            font-size: 14px;

            .listHeader {
                width: 100%;
                height: 40px;
                display: grid;
                grid-template-columns: 5fr 2fr 2fr 2fr 2fr;
                align-items: center;
                justify-items: center;
                border-bottom: 1px solid #f5f5f5;

            }

            .goods {
                width: 100%;
                min-height: 120px;
                display: grid;
                grid-template-columns: 5fr 2fr 2fr 2fr 2fr;
                align-items: center;
                border-bottom: 1px solid #f5f5f5;
                padding: 20px 0;

                span:first-child {
                    display: grid;

                }

                .goodInfo {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    gap: 10px;
                    padding-left: 20px;

                    img {
                        width: 100px;
                        height: 100px;
                        border-radius: 4px;
                    }

                    span {
                        font-size: 14px;
                        color: #666;
                    }
                }

                .price {
                    text-align: center;
                    color: #27ba9b;
                    font-size: 16px;
                }

                .count {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 5px;


                }

                .total {
                    text-align: center;
                    color: #27ba9b;
                    font-size: 16px;
                }

                .pay {
                    text-align: center;

                    color: #cf4444;
                    cursor: pointer;
                }
            }
        }

        .deliveryTime {
            width: 100%;
            background-color: white;

            .content {
                padding: 30px;
                display: flex;
                align-items: center;

                button {
                    width: 250px;
                    height: 35px;
                    margin: 0 10px;
                    padding: 5px;
                    color: white;
                    border: #666 0.5px solid;
                    background-color: white;
                    color: #666;
                    border-radius: 4px;
                    cursor: pointer;
                    font-size: 14px;

                    &:hover {
                        background-color: #27ba9b;
                        color: white;
                        border: none;
                        transform: matrix(1, 0, 0, 1, 0, -2);
                        transition: all 0.1s ease-in-out;
                    }

                    &.active {
                        background-color: #27ba9b;
                        color: white;
                        border: none;
                    }
                }
            }
        }

        .payWay {
            width: 100%;
            background-color: white;

            .content {
                padding: 30px;
                display: flex;
                align-items: center;

                button {
                    width: 250px;
                    height: 35px;
                    margin: 0 10px;
                    padding: 5px;
                    color: white;
                    border: #666 0.5px solid;
                    background-color: white;
                    color: #666;
                    border-radius: 4px;
                    cursor: pointer;
                    font-size: 14px;

                    span {
                        margin-left: 5px;
                        font-size: 12px;
                    }

                    &:hover {
                        background-color: #27ba9b;
                        color: white;
                        border: none;
                        transform: matrix(1, 0, 0, 1, 0, -2);
                        transition: all 0.1s ease-in-out;
                    }

                    &.active {
                        background-color: #27ba9b;
                        color: white;
                        border: none;
                    }
                }
            }
        }

        .money {
            width: 100%;
            background-color: white;

            .content {
                width: 100%;
                height: 200px;
                display: flex;
                padding: 30px;
                // justify-content: center;
                align-items: center;
                position: relative;

                .info {
                    width: 100%;
                    height: 100%;
                    display: grid;
                    grid-template-rows: repeat(3, 1fr);
                    // row-gap: 10px;
                    font-size: 14px;
                    color: #999;

                    span:last-child {
                        margin-left: 10px;
                        color: #333;
                        letter-spacing: 2px;
                    }

                    div:last-child {
                        span:last-child {
                            color: #cf4444;
                            font-size: 22px;
                        }
                    }
                }

                button {
                    position: absolute;
                    bottom: 20px;
                    right: 0;
                    width: 100px;
                    height: 40px;
                    margin: 0 20px;
                    color: white;
                    border: none;
                    background-color: #27ba9b;
                    border-radius: 4px;
                    cursor: pointer;
                    font-size: 14px;

                    &:hover {
                        background-color: #1ea385;
                    }
                }






            }
        }
    }

}